<template>
    <div style="display: flex">

      <div class="tree-box">
        <el-input v-model="keyWord" placeholder="请输入成员名称"></el-input>
<!--        <el-tree-->
<!--          ref="tree"-->
<!--          node-key="id"-->
<!--          :props="props"-->
<!--          :load="loadNode"-->
<!--          @check-change="handleCheckChange"-->
<!--          :filter-node-method="filterNode"-->
<!--          lazy-->
<!--          show-checkbox>-->
<!--        </el-tree>-->

        <el-tree
          ref="tree"
          node-key="id"
          :data="departments"
          :props="props"
          @check-change="handleCheckChange"
          @check="handleNodeClick"
          :filter-node-method="filterNode"
          show-checkbox>
        </el-tree>
      </div>

      <div class="tree-box">

        <div class="title">已选成员</div>

        <div class="member-item" v-for="(member,index) in members">
          <div>
            <i class="el-icon-user"></i>
            <span>{{member.name}}</span>
            <span>({{member.department_name}})</span>
          </div>
          <div @click="deleteMember(member)">
            <i class="el-icon-close"></i>
          </div>

        </div>
      </div>


    </div>
</template>

<script>
    import log from "../../../../sampleInspection/task/modules/log";

    export default {
        name: "treeTransfer",
        props:{
            list:{
                type:Array,
                default:function () {
                    return[];
                }
            },
            people:{
                type:Array,
                default:function () {
                    return[];
                }
            }
        },
        model: {
            prop: 'list',
            event: 'change'
        },
        computed:{
            // filterList(){
            //     console.log(5555)
            //     // const key = this.keyWord
            //     if (this.keyWord){
            //         let newArr = this.departments.filter((item, index,arr)=>{
            //             return item.department_name.indexOf(this.keyWord) != -1
            //         });
            //     }else {
            //         return this.departments
            //     }
            // }
        },
        watch:{
            list:{
                handler(newV,oldV){
                    if (newV){
                        this.members = newV;
                    }
                },
                immediate:true,
                deep:true,
            },
            keyWord: {
                handler(newv,oldv){
                    console.log(newv)
                    this.$refs.tree.filter(newv);
                }

            }
        },
        data:function () {
            return{
                props: {
                    label: 'name',
                    children: 'children',
                    isLeaf: 'leaf'
                },
                departments:[],
                members:[],
                keyWord:'',
                filterList:[]
            }
        },
        created:function(){
            // this.departments = this.$store.getters.department
            // this.departments.forEach(item=>{
            //     item.name = item.department_name
            //     item.disabled = true;
            // })
            // this.filterList = this.departments

            // this.$api.USER_GROUP_DEPARTMENT_LIST().then(res=>{
            //     if (res.code == 200){
            //         res.data.data.forEach(mem=>{
            //             if (!mem.children || !mem.children.length){
            //                 mem.leaf = true
            //             }else if (mem.children.length) {
            //                 mem.children.forEach(item=>{
            //                     item.leaf = true;
            //                     item.department_name = mem.name;
            //                     item.department_id = mem.id;
            //                 })
            //             }
            //         })
            //         this.departments = res.data.data;
            //     }else{
            //         this.$message.error(res.msg)
            //     }
            // });

            this.$api.SYS_DEPARTMENT_USER().then(res=>{
                if (res.code == 200){
                    console.log(res.data);
                    this.dealDepartmentData(res.data)

                    this.departments = res.data
                }
            })

        },
        methods:{
            dealDepartmentData:function(list){
                for (let i = 0; i < list.length; i++){
                    let data = list[i]
                    data.name = data.department_name
                    if (!data.children){
                        data.children = []
                    }else if (data.children.length){
                        this.dealDepartmentData(data.children);
                    }

                    if (data.user){
                        data.user.forEach(user=>{
                            user.name = user.user_name
                            user.department_name = data.department_name;
                            user.department_id = data.id
                            user.type = "user";
                            user.disabled = this.people.findIndex(a=>a.member_id == user.id) != -1
                            data.children.unshift(user);
                        })

                    }
                }
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            loadNode(node, resolve) {
                console.log(22222)
                if (node.level === 0) {
                    return resolve(this.departments);
                }
                if (node.level > 1) return resolve([]);

                let d = {
                    department_id:node.data.id,
                    limit:1000,
                    skip:1,
                    user_status:1,
                }
                this.$api.GET_USER_LIST(d).then(res=>{
                    if (res.code == 200){
                        let list = res.data.data || [];
                        if (list.length){
                            node.data.disabled = false
                            list.forEach(item=>{
                                item.name = item.user_name
                                item.leaf = true;
                            })
                        }
                        resolve(list);
                    }
                })
            },
            handleNodeClick:function(a,b){
                console.log(a,b)
                this.members = []

                b.checkedNodes.forEach(item=>{
                    if (item.type && item.type == "user"){
                        this.members.push(item)
                    }
                })

                this.$emit('change', this.members)
            },
            handleCheckChange(data, checked, indeterminate) {
                // console.log(data,checked,indeterminate)
                // if (checked && data.department){
                //     this.members.push(data)
                // }else if (data.department){
                //     let index = this.members.findIndex(a=>a.id == data.id)
                //     if (index != -1){
                //         this.members.splice(index,1)
                //     }
                // }
                console.log(checked,indeterminate)
                return
                if (checked){
                    if (data.children && data.children.length){
                        this.addAllMember(data.children);
                        // for (let i = 0; i < data.children.length;i++){
                        //     console.log(data.children[i].name,"-----")
                        //     let index = this.members.findIndex(a=>a.id == data.children[i].id);
                        //     if (index == -1 && data.children[i].type == "user"){
                        //         console.log(data.children[i].name,"=====")
                        //         this.members.push(data.children[i])
                        //     }
                        // }
                    }else {
                        let index = this.members.findIndex(a=>a.id == data.id);
                        console.log(data.name,"+++++++")
                        if (index == -1 && data.type == "user" && !data.disabled){
                            console.log(data.name,"____________")
                            this.members.push(data)
                        }
                    }
                }else if (indeterminate) {
                    console.log(data)
                    this.addAllMember(data.children);
                }else{
                    if (data.children && !indeterminate) {
                        this.deleteAllMember(data.children);
                        // for (let i = 0; i < data.children.length;i++){
                        //     let index = this.members.findIndex(a=>a.id == data.children[i].id);
                        //     if (index != -1){
                        //         this.members.splice(index,1)
                        //     }
                        // }
                    }else {
                        let index = this.members.findIndex(a=>a.id == data.id);
                        if (index != -1){
                            this.members.splice(index,1)
                        }
                    }
                }
                //console.log(this.members);
                this.$emit('change', this.members)

            },
            addAllMember:function(list){
                console.log(232323232)
                for (let i = 0; i < list.length;i++){
                    let index = this.members.findIndex(a=>a.id == list[i].id);
                    if (index == -1 && list[i].type == "user" && !list[i].disabled){
                        console.log(list[i])
                        this.members.push(list[i])
                    }else if (!list[i].type && list[i].children){
                        console.log('sdsdsdsdsdsd')
                        this.addAllMember(list[i].children)
                    }
                }
            },
            deleteAllMember:function(list){
                for (let i = 0; i < list.length;i++){
                    let index = this.members.findIndex(a=>a.id == list[i].id);
                    if (index != -1 && list[i].type == "user"){
                        this.members.splice(index,1)
                    }else if (!list[i].type && list[i].children){
                        this.deleteAllMember(list[i].children)
                    }
                }
            },
            deleteMember:function (member) {
                let index = this.members.findIndex(a=>a.id == member.id);
                if (index != -1){
                    this.members.splice(index,1)
                }
                this.$refs.tree.setChecked(member.id,false)
            }
        }
    }
</script>

<style lang="scss" scoped>

  .tree-box{
    padding: 10px;
    border: 1px solid #DCDFE6;
    min-width: 300px;
    margin-right: 20px;
  }
  .member-item{
    display: flex;
    justify-content: space-between;
  }
</style>
